<template>
  <div class="white-box">
    <div class="task-one">
      <div class="task-one__item" style="width: 100%">
        <span class="task-one__label">订单类型：</span>
        <el-radio-group v-model="searchParams.orderType" size="large">
          <el-radio-button label="全部" value="" />
          <el-radio-button label="报单区" :value="0" />
          <el-radio-button label="消费区" :value="1" />
        </el-radio-group>
      </div>
      <div class="task-one__item">
        <span class="task-one__label">用户名：</span>
        <el-input placeholder="请输入用户名" v-model="searchParams.userName" @keyup.enter.native="handleSearch"
                  clearable></el-input>
      </div>
      <div class="task-one__item">
        <span class="task-one__label">订单号：</span>
        <el-input placeholder="请输入订单号" v-model="searchParams.orderCode" @keyup.enter.native="handleSearch"
                  clearable></el-input>
      </div>
      <div class="task-one__item">
        <span class="task-one__label">快递公司：</span>
        <el-input placeholder="请输入快递公司" v-model="searchParams.courierCompany	" @keyup.enter.native="handleSearch"
                  clearable></el-input>
      </div>
      <div class="task-one__item">
        <span class="task-one__label">快递单号：</span>
        <el-input placeholder="请输入快递单号" v-model="searchParams.courierNumber	" @keyup.enter.native="handleSearch"
                  clearable></el-input>
      </div>
<!--      <div class="task-one__item">-->
<!--        <span class="task-one__label">冻结：</span>-->
<!--        <el-select v-model="searchParams.freeze" placeholder="请选择" clearable>-->
<!--          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.freeze"-->
<!--                     :key="index"/>-->
<!--        </el-select>-->
<!--      </div>-->
      <div class="task-one__item">
        <span class="task-one__label">收货方式：</span>
        <el-select v-model="searchParams.pickup" placeholder="请选择" clearable>
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.pickup"
                     :key="index"/>
        </el-select>
      </div>


      <div class="task-one__btn clearfix task-wrap-btn">
        <el-button type="primary" :loading="searchBtnLoading" :icon="Search"
                   @click="handleSearch">搜索</el-button>
        <el-button type="success" :loading="importDataBtnLoading" @click="importData('order/export-list-order')"
                   :icon="Download">导出</el-button>
      </div>
    </div>

    <el-tabs v-model="tabsActive" type="card">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <template v-for="(item, index) in selectOptions.orderStatus">
        <el-tab-pane :label="item.label" :name="item.value"></el-tab-pane>
      </template>
    </el-tabs>

<!--    <div style="margin-bottom: 10px">-->
<!--      <span style="margin-right: 20px">已选：0</span>-->
<!--      <el-button plain size="small" @click="">批量打印</el-button>-->
<!--    </div>-->

    <div class="table-head flexs">
<!--      <div class="table-check">-->
<!--        <el-checkbox value="Value 1" size="large"/>-->
<!--      </div>-->
      <div class="table-good table-head-base">商品信息</div>
      <div class="table-price table-head-base">收货信息/自提点</div>
      <div class="table-pay-type table-head-base">实付金额</div>
      <div class="table-buy-info table-head-base">买家信息</div>
      <div class="table-oper table-head-base">操作</div>
    </div>
    <div class="table-body"  v-loading="loading">
      <el-empty description="暂无订单" v-if="!loading && list.length == 0"/>
      <div class="table-item"  v-for="(row, index) in list">
        <div class="table-item-head flexs">
          <div class="table-item__head-left">
<!--            <div class="table-check" style="margin-right: 12px;">-->
<!--              <el-checkbox value="Value 1" size="large"/>-->
<!--            </div>-->
            <p class="item-head__sn">订单编号：{{row.orderCode}}</p>
<!--            <p class="item-head__sn">商户单号：24122732807</p>-->
            <p class="item-head__text" v-if="row.payTime"> 支付时间：{{row.payTime}}</p>
            <p class="item-head__text" v-if="row.deliveryTime"> 发货时间：{{row.deliveryTime}}</p>
            <p class="item-head__text" v-if="row.receiptTime"> 收货时间：{{row.receiptTime}}</p>
            <p class="item-head__text"> 订单状态：
<!--              0=待支付，1=待发货，2=待收货，3=待评价，4=已完成 5=已取消 10=挂单-->
              <el-text v-if="row.orderStatus === 1" type="warning">待发货</el-text>
              <el-text v-else-if="row.orderStatus === 4" type="success">已完成</el-text>
              <el-text v-else-if="row.orderStatus === 10" type="primary">挂单</el-text>
              <el-text v-else-if="row.orderStatus === 0" type="danger">待支付</el-text>
              <el-text v-else-if="row.orderStatus === 2" type="info">待收货</el-text>
              <el-text v-else-if="row.orderStatus === 3" type="info">待评价</el-text>
              <el-text v-else-if="row.orderStatus === 5" type="info">已取消</el-text>
              <el-text v-else type="info">-</el-text>
            </p>
            <p class="item-head__text"> 配送方式：
              <el-text v-if="row.pickup === 1" type="success">快递</el-text>
              <el-text v-if="row.pickup === 2" type="success">自提</el-text>
            </p>
          </div>
<!--          <div class="table-item__head-right">-->
<!--            <el-button class="action-btn" size="small" plain type="default" @click="">打印发货单</el-button>-->
<!--          </div>-->
        </div>
        <div class="table-item-cont">
          <div class="table-good table-head-base item-cont__base" style="padding-bottom: 8px;">
            <div class="table-sub" v-if="row.productList">
              <div class="flexs table-good-item" v-for="(item, index) in row.productList">
                <el-image style="width: 65px; height: 65px; border: 1px solid rgb(204, 204, 204); padding: 3px; border-radius: 5%;" :src="getImg(item.productImg)" fit="cover" />
                <div style="margin-left: 10px">
                  <p class="table-sub__p-mb">{{item.productName}}</p>
                  <p class="table-sub__p-mb">
                    <span style="font-weight: 700;margin-right: 10px">￥{{item.productPrice}}</span>
                    <span style="margin-right: 10px">规格：{{item.productSpecifications}}</span>
                    <span style="margin-right: 10px">数量：{{item.count}}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="table-price table-head-base item-cont__base">
            <div class="table-sub" v-if="row.pickup === 1 && row.name">
              <p class="table-sub__p-mb">快递收货地址：</p>
              <p class="table-sub__p-mb">{{row.name}}</p>
              <p class="table-sub__p-mb">{{row.phone}}</p>
              <p class="table-sub__p-mb">
                {{row.province}} {{row.city}} {{row.district}} {{row.address}}
              </p>
            </div>
            <div class="table-sub" v-if="row.pickup === 2 && row.pickupAddress">
              <p class="table-sub__p-mb">自提点：{{row.pickupAddress.storesName}}</p>
              <p class="table-sub__p-mb">{{row.pickupAddress.name}}-{{row.pickupAddress.phone}}</p>
              <p class="table-sub__p-mb">
                {{row.pickupAddress.province}} {{row.pickupAddress.city}} {{row.pickupAddress.district}} {{row.pickupAddress.address}}
              </p>
            </div>
          </div>
          <div class="table-pay-type table-head-base item-cont__base">
            <div class="table-sub">
              <p class="table-sub__p-mb">实付金额：<em style="font-size: 16px;color: rgb(75, 147, 250);">￥{{row.price}}</em></p>
<!--              <p class="table-sub__p-mb">已优惠：￥0.00</p>-->
<!--              <p class="table-sub__p-mb">包含运费：￥0.00</p>-->
<!--              <p class="table-sub__p-mb">支付方式：<span style="color: rgb(75, 147, 250);">余额支付</span></p>-->
              <p class="table-sub__p-mb" v-if="row.note">备注：{{row.note}}</p>
            </div>
          </div>
          <div class="table-buy-info table-head-base item-cont__base">
            <div class="table-sub" v-if="row.user">
              <div class="flexs">
                <el-avatar :size="50" :src="proxy.imgUrl + row.user.avatar"/>
                <div style="margin-left: 10px">
                  <p class="table-sub__p-mb"><el-text type="info">昵称：</el-text>{{row.user.nickName}}</p>
                  <p class="table-sub__p-mb"><el-text type="info">手机号：</el-text>{{row.user.phone}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="table-oper table-head-base">
            <div class="table-sub table-sub-btn">
              <el-button class="action-btn" size="small" plain type="primary" @click="toDetail(row)">查看详情</el-button>
              <!--0=待支付，1=待发货，2=待收货，3=待评价，4=已完成 5=已取消 10=挂单-->
              <el-button class="action-btn" size="small" plain type="danger" @click="handleUpdateStatus(row,3)" v-if="row.orderStatus === 0">取消订单</el-button>
              <el-button class="action-btn" size="small" plain type="success" @click="handleUpdateStatus(row,1)" v-if="row.orderStatus === 1">标记发货</el-button>
              <el-button class="action-btn" size="small" plain type="warning" @click="handleUpdateStatus(row,2)" v-if="row.orderStatus === 2">买家已收货</el-button>
              <el-button class="action-btn" size="small" plain type="warning" @click="handleUpdateStatus(row,4)" v-if="row.orderStatus === 0">标记已支付</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>


    <el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
                   :total="totalNums" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <updateStatus :show="updateStatusShow" :data="updateStatusData" @close="closeUpdateStatus"></updateStatus>

    <go-back />
  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch,
  computed
} from "vue"
import listMixins from "@mixins/hook/list"
import {
  useRouter
} from "vue-router"
import {
  CirclePlus,Search,Download
} from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import updateStatus from "./components/updateStatus.vue";

const router = useRouter()
const {
  proxy
} = getCurrentInstance()

/**
 * minxin列表加载
 */
const {
  page,
  pageSizeNum,
  pageSize,
  loading,
  totalNums,
  searchParams,
  searchBtnLoading,
  apiPath,
  list,
  dialogFormRef,
  dialogShow,
  dialogForm,
  dialogParams,
  handleSearch,
  getData,
  handleAdd,
  handleEdit,
  resetDialogForm,
  handleAllSelected,
  submitDialogForm,
  closeDialog,
  handleAction,
  handleDelete,
  importData,
  importDataBtnLoading
} = listMixins()


apiPath.value = 'order/background';

onMounted(() => {
  getData()
})
const tabsActive = ref('all')
searchParams.orderType = '';
searchParams.orderStatus = computed(()=>{
  if(tabsActive.value == 'all'){
    return ''
  }
  return tabsActive.value
})
watch(tabsActive,()=>{
  page.value = 1
  getData()
})

watch(()=>searchParams.orderType,()=>{
  page.value = 1
  getData()
})


const getImg = (imagePath) =>{
  try {
    return proxy.imgUrl + imagePath
  }catch(err){
    return ''
  }
}
const selectOptions = reactive({
  // 0=待支付，1=待发货，2=待收货，3=待评价，4=已完成 5=已取消 10=挂单
  orderStatus:[
    {label:'待支付',value:0},
    {label:'待发货',value:1},
    {label:'待收货',value:2},
    {label:'待评价',value:3},
    {label:'已完成',value:4},
    {label:'已取消',value:5},
    {label:'挂单',value:10}
  ],
  pickup: [
    {label: '快递', value: 1},
    {label: '自提', value: 2}
  ],
  freeze: [
    {label: '是', value: 0},
    {label: '否', value: 1},
  ]
})
const toDetail = (row) =>{
  router.push({
    path: "/Order/OrderDetail",
    query: {
      sid:row.sid
    }
  })
}
const updateStatusShow = ref(false);
const updateStatusData = reactive({
  row:{},
  status:0
});
const closeUpdateStatus =(isSubmit)=>{
  updateStatusShow.value = false
  if(isSubmit){
    getData();
  }
}
const handleUpdateStatus = (row,status) =>{
  updateStatusData.row = row;
  updateStatusData.status = status;
  updateStatusShow.value = true
}

</script>

<style lang="less">
.table-head {
  background-color: #f5f7fa;
  width: 100%;
  height: 50px;
  border-radius: 2px;
  border: 1px solid #ebeef5;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 0 16px
}

.table-body {
  margin-bottom: 32px;
  min-height: 40px;
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  color: #646566
}

.table-body .table-item {
  border: 1px solid #ebeef5;
  margin-bottom: 12px
}

.table-body .table-item .table-item-head {
  background-color: #f5f7fa;
  width: 100%;
  height: 46px;
  overflow: hidden;
  padding: 0 16px;
  border-bottom: 1px solid #ebeef5
}

.table-body .table-item .table-item-head .table-item__head-left {
  display: flex;
  align-items: center
}

.table-body .table-item .table-item-head .table-item__head-left .item-head__sn {
  font-size: 14px;
  font-weight: 700;
  color: #323233;
  margin-right: 20px;
  flex: none
}

.table-body .table-item .table-item-head .table-item__head-left .item-head__text {
  font-size: 14px;
  color: #323233;
  margin-right: 20px;
  flex: none
}

.table-body .table-item .table-item-head .table-item__head-left .item-head__text span {
  //color: #4b93fa
}

.table-body .table-item .table-item-cont {
  display: flex
}

.table-body .table-item .table-item-cont>div {
  padding: 12px 8px;
  font-weight: 500;
  text-align: left
}

.table-body .table-item .table-item-cont>div:last-child {
  //text-align: left
}

.table-body .table-item .table-item-cont>div:last-child .el-button {
  margin: 0 12px 8px 0
}

.table-body .table-item .table-item-cont .table-sub {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden
}

.table-body .table-item .table-item-cont .item-cont__base {
  border-right: 1px solid #ebeef5
}

.table-check {
  flex: none;
  display: flex;
  margin-right: 4px
}

.table-good {
  flex: 1
}

.table-price {
  width: 15.5%;
  flex: none;
  text-align: left
}

.table-pay-type {
  width: 13%;
  flex: none;
  text-align: left
}

.table-buy-info {
  width: 16.5%;
  flex: none;
  text-align: left
}

.table-oper {
  width: 14%;
  flex: none
}

.table-head-base {
  font-size: 14px;
  font-weight: 700;
  color: #323233;
  padding: 0 8px
}
.table-body .table-item .table-item-cont .table-sub-btn{
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: center
}

.table-sub__p-mb {
  line-height: 24px;
}
.table-good-item{
  margin-bottom: 10px;
}
.table-good-item:last-child{
  margin-bottom: 0;
}
</style>